EmailForm.tsx ➔ EmailForm - Code Metrics - Inspection of "Id 19 - small fixes" - FalkenDev/SparkRentals-Mobile-App - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Pull Request — dev (#17)

by Oscar

created 2023-01-12 17:38 UTC

EmailForm.tsx ➔ EmailForm C

↳ Parent: components/auth/EmailForm.tsx

Complexity

Conditions

Size

Total Lines	163
Code Lines	131

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	131
dl	0
loc	163
rs	5.1333
c	0
b	0
f	0
cc	8

How to fix Long Method

import React from "react";
import { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, Pressable, StyleSheet, Image, StatusBar } from "react-native";
import authModel from "../../models/auth";
import CheckBox from 'expo-checkbox';
import FlashMessage from 'react-native-flash-message';
import { showMessage, hideMessage } from "react-native-flash-message";
import TermsModal from "../modals/TermsModal";

function checkEmail(email: string): Boolean {
    return authModel.checkEmail(email);
};

function checkAlert() {
    showMessage({
        message: 'You must agree to terms to register',
        type: 'danger',
        position: 'bottom'
    });
};   

export default function EmailForm({setToken, navigation, setIsLoggedIn}) {
    const [name, setName] = useState(null);
    const [email, setEmail] = useState(null);
    const [password, setPassword] = useState(null);
    const [phonenumber, setPhonenumber] = useState(null);
    const [accept, setAccepts] = useState(false);
    const [modalVisible, setModalVisible] = useState(false);
    const [termsVisible, setTermsVisible] = useState(false);

    async function createUser() {

        const userName = name.split(' ');
        const firstName = userName[0];
        const lastName = userName[1];

        // Check if email is valid
        if (!(checkEmail(email))) {
            showMessage({
                message: 'Invalid email',
                type: 'danger',
                position: 'bottom'
            })
        } else {
            
            // Prepare user object
            const user = {
                firstName: firstName,
                lastName: lastName,
                email: email,
                password: password,
                phoneNumber: phonenumber,
                balance: 1.2
            };

            // Register user
            const result = await authModel.register(user);

            // Check if registration successful
            if (result['type'] === "success") {
                logIn();
            }

            showMessage({
                message: result['title'],
                description: result['message'],
                type: result['type'],
                position: 'bottom'

            });


        };
    };

    async function logIn() {
        const userLogin = {
            email: email,
            password: password
        };

        const loginUser = await authModel.login(userLogin);
        if (Object.prototype.hasOwnProperty.call(loginUser, 'errors')) {
            showMessage({
                message: loginUser['errors']['title'],
                type: 'danger',
                position: 'bottom'
            })
        } else {
            setToken(loginUser['token']);
            setIsLoggedIn(true);
        }
    };
 

    return (
        <View style={styles.container}>
            <Image style={styles.logo} source={require('../../assets/logo_dark.png')}></Image>
            <Text style={styles.formTitle}>Register</Text>

            <TextInput
            placeholder="Firstname Lastname"
            style={styles.input}
            onChangeText={(content: string) => {
                setName(content)
            }}
            />

            <TextInput
            placeholder="Email"
            style={styles.input}
            keyboardType="email-address"
            onChangeText={(content: string) => {
                setEmail(content);
            }}
            />

            <TextInput
            placeholder="Password"
            style={styles.input}
            keyboardType='numbers-and-punctuation'
            secureTextEntry={true}
            onChangeText={(content: string) => {
                setPassword(content)
            }}
            />

            <TextInput
            placeholder="Phonenumber"
            style={styles.input}
            keyboardType='phone-pad'
            onChangeText={(content: string) => {
                setPhonenumber(content)
            }}
            />

            
            <View style={styles.termsContainer}>
                <CheckBox
                    style={styles.checkbox}
                    disabled={false}
                    value={accept}
                    color={'cornflowerblue'}
                    onValueChange={() => {
                        setAccepts((accept ? false : true));
                    }}
                >

                </CheckBox>
                
                <View style={styles.termsTextContainer}>
                    <Text style={styles.termsText}>By registering, you agree to our </Text> 
                    <Pressable onPress={() => {
                        setModalVisible(!modalVisible);
                        setTermsVisible(true);
                    }}>
                        <Text style={[styles.termsText, {color: 'blue'}]}>terms and conditions </Text> 
                    </Pressable>
                    <Text style={styles.termsText}>and </Text> 

                    <Pressable onPress={() => {
                        setModalVisible(!modalVisible);
                        setTermsVisible(false);
                    }}>
                        <Text style={[styles.termsText, {color: 'blue'}]}>privacy policy.</Text>
                    </Pressable>
                </View>
                
            </View>
            
            {accept ? 
                <Pressable style={styles.emailRegister} onPress={createUser}>
                <Text>Register</Text>
                </Pressable>
            :
                <Pressable style={styles.emailRegisterGray} onPress={checkAlert}>
                <Text style={styles.greyedOut}>Register</Text>
                </Pressable>
            }
        <TermsModal navigation={navigation} modalVisible={modalVisible} setModalVisible={setModalVisible} termsVisible={termsVisible}/>
        <FlashMessage position={'top'}/>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        height: '100%',
        alignItems: "center",
        width: '100%',
    },

    input: {
        width: '90%',
        marginBottom: 30,
        borderRadius: 10,
        height: 50,
        padding: 10,
        borderBottomWidth: 2,
        borderColor: 'gray'
    },

    emailRegister: {
        backgroundColor: 'cornflowerblue',
        width: '80%',
        height: 50,
        borderRadius: 10,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 100,
    },

    emailRegisterGray: {
        backgroundColor: 'gray',
        width: '80%',
        height: 50,
        borderRadius: 10,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 100,
    },

    greyedOut: {
        color: '#989898'
    },

    termsContainer: {
        marginTop: 20,
        width: '80%',
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'space-between'
    },

    checkbox: {
        height: 30,
        width: 30,
    },

    termsText: {

    },

    logo: {
        marginTop: 20,
    },

    formTitle: {
        fontSize: 48,
        width: '90%',
        fontWeight: 'bold',
        marginTop: 40,
        marginBottom: 10
    },

    termsTextContainer: {
        width: '80%',
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
});

1			import React from "react";
2			import { useState, useEffect } from 'react';
3			import { View, Text, TextInput, Button, Pressable, StyleSheet, Image, StatusBar } from "react-native";
4			import authModel from "../../models/auth";
5			import CheckBox from 'expo-checkbox';
6			import FlashMessage from 'react-native-flash-message';
7			import { showMessage, hideMessage } from "react-native-flash-message";
8			import TermsModal from "../modals/TermsModal";
9
10			function checkEmail(email: string): Boolean {
11			return authModel.checkEmail(email);
12			};
13
14			function checkAlert() {
15			showMessage({
16			message: 'You must agree to terms to register',
17			type: 'danger',
18			position: 'bottom'
19			});
20			};
21
22			export default function EmailForm({setToken, navigation, setIsLoggedIn}) {
23			const [name, setName] = useState(null);
24			const [email, setEmail] = useState(null);
25			const [password, setPassword] = useState(null);
26			const [phonenumber, setPhonenumber] = useState(null);
27			const [accept, setAccepts] = useState(false);
28			const [modalVisible, setModalVisible] = useState(false);
29			const [termsVisible, setTermsVisible] = useState(false);
30
31			async function createUser() {
32
33			const userName = name.split(' ');
34			const firstName = userName[0];
35			const lastName = userName[1];
36
37			// Check if email is valid
38			if (!(checkEmail(email))) {
39			showMessage({
40			message: 'Invalid email',
41			type: 'danger',
42			position: 'bottom'
43			})
44			} else {
45
46			// Prepare user object
47			const user = {
48			firstName: firstName,
49			lastName: lastName,
50			email: email,
51			password: password,
52			phoneNumber: phonenumber,
53			balance: 1.2
54			};
55
56			// Register user
57			const result = await authModel.register(user);
58
59			// Check if registration successful
60			if (result['type'] === "success") {
61			logIn();
62			}
63
64			showMessage({
65			message: result['title'],
66			description: result['message'],
67			type: result['type'],
68			position: 'bottom'
69
70			});
71
72
73			};
74			};
75
76			async function logIn() {
77			const userLogin = {
78			email: email,
79			password: password
80			};
81
82			const loginUser = await authModel.login(userLogin);
83			if (Object.prototype.hasOwnProperty.call(loginUser, 'errors')) {
84			showMessage({
85			message: loginUser['errors']['title'],
86			type: 'danger',
87			position: 'bottom'
88			})
89			} else {
90			setToken(loginUser['token']);
91			setIsLoggedIn(true);
92			}
93			};
94
95
96			return (
97			<View style={styles.container}>
98			<Image style={styles.logo} source={require('../../assets/logo_dark.png')}></Image>
99			<Text style={styles.formTitle}>Register</Text>
100
101			<TextInput
102			placeholder="Firstname Lastname"
103			style={styles.input}
104			onChangeText={(content: string) => {
105			setName(content)
106			}}
107			/>
108
109			<TextInput
110			placeholder="Email"
111			style={styles.input}
112			keyboardType="email-address"
113			onChangeText={(content: string) => {
114			setEmail(content);
115			}}
116			/>
117
118			<TextInput
119			placeholder="Password"
120			style={styles.input}
121			keyboardType='numbers-and-punctuation'
122			secureTextEntry={true}
123			onChangeText={(content: string) => {
124			setPassword(content)
125			}}
126			/>
127
128			<TextInput
129			placeholder="Phonenumber"
130			style={styles.input}
131			keyboardType='phone-pad'
132			onChangeText={(content: string) => {
133			setPhonenumber(content)
134			}}
135			/>
136
137
138			<View style={styles.termsContainer}>
139			<CheckBox
140			style={styles.checkbox}
141			disabled={false}
142			value={accept}
143			color={'cornflowerblue'}
144			onValueChange={() => {
145			setAccepts((accept ? false : true));
146			}}
147			>
148
149			</CheckBox>
150
151			<View style={styles.termsTextContainer}>
152			<Text style={styles.termsText}>By registering, you agree to our </Text>
153			<Pressable onPress={() => {
154			setModalVisible(!modalVisible);
155			setTermsVisible(true);
156			}}>
157			<Text style={[styles.termsText, {color: 'blue'}]}>terms and conditions </Text>
158			</Pressable>
159			<Text style={styles.termsText}>and </Text>
160
161			<Pressable onPress={() => {
162			setModalVisible(!modalVisible);
163			setTermsVisible(false);
164			}}>
165			<Text style={[styles.termsText, {color: 'blue'}]}>privacy policy.</Text>
166			</Pressable>
167			</View>
168
169			</View>
170
171			{accept ?
172			<Pressable style={styles.emailRegister} onPress={createUser}>
173			<Text>Register</Text>
174			</Pressable>
175			:
176			<Pressable style={styles.emailRegisterGray} onPress={checkAlert}>
177			<Text style={styles.greyedOut}>Register</Text>
178			</Pressable>
179			}
180			<TermsModal navigation={navigation} modalVisible={modalVisible} setModalVisible={setModalVisible} termsVisible={termsVisible}/>
181			<FlashMessage position={'top'}/>
182			</View>
183			);
184			};
185
186			const styles = StyleSheet.create({
187			container: {
188			height: '100%',
189			alignItems: "center",
190			width: '100%',
191			},
192
193			input: {
194			width: '90%',
195			marginBottom: 30,
196			borderRadius: 10,
197			height: 50,
198			padding: 10,
199			borderBottomWidth: 2,
200			borderColor: 'gray'
201			},
202
203			emailRegister: {
204			backgroundColor: 'cornflowerblue',
205			width: '80%',
206			height: 50,
207			borderRadius: 10,
208			display: 'flex',
209			justifyContent: 'center',
210			alignItems: 'center',
211			marginTop: 100,
212			},
213
214			emailRegisterGray: {
215			backgroundColor: 'gray',
216			width: '80%',
217			height: 50,
218			borderRadius: 10,
219			display: 'flex',
220			justifyContent: 'center',
221			alignItems: 'center',
222			marginTop: 100,
223			},
224
225			greyedOut: {
226			color: '#989898'
227			},
228
229			termsContainer: {
230			marginTop: 20,
231			width: '80%',
232			alignItems: 'center',
233			flexDirection: 'row',
234			justifyContent: 'space-between'
235			},
236
237			checkbox: {
238			height: 30,
239			width: 30,
240			},
241
242			termsText: {
243
244			},
245
246			logo: {
247			marginTop: 20,
248			},
249
250			formTitle: {
251			fontSize: 48,
252			width: '90%',
253			fontWeight: 'bold',
254			marginTop: 40,
255			marginBottom: 10
256			},
257
258			termsTextContainer: {
259			width: '80%',
260			flexDirection: 'row',
261			flexWrap: 'wrap',
262			},
263			});

FalkenDev / SparkRentals-Mobile-App

Pull Request — dev (#17)

EmailForm.tsx ➔ EmailForm C

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like